<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 16px;

        }
        .bigbox{
            width: 400px;
            height: 500px;
            border: 2px solid #ff7575;
            border-radius: 8px;
            margin: 20px auto;
            background-color: aqua;
        }
        h1{
            font-size: 32px;
            text-align: center;
            margin-top: 10px;
        }
        .s_box{
            width: 300px;
            height: 400px;
            border: 1px solid #757575;
            margin: 0 auto;
            background-color: #fff;
            /* border: 10px; */
            border-radius: 10px;
        }
        h2{
            font-size: 24px;
            font-weight: 600;
            color: #ff7575;
            text-align: center;
        }
        .block input{
            width: 250px;
            height: 30px;
            border: 1px solid #000;
            border-radius: 10px;
            margin: 20px;
        }
        .dian input{
            width: 250px;
            height: 40px;
            border: 2px solid #757575;
            background-color:#855353;
            /* margin: 0 auto; */
            margin-left: 23px;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div class="bigbox">
        <h1>阿里云盘</h1>
        <div class="s_box">
            <h2>注册新账号</h2>
            <div class="block">
                <input type="text"placeholder="输入账号">
            </div>
            <div class="block">
                <input type="text"placeholder="输入密码">

            </div>
            <div class="block">
                <input type="text"placeholder="确认密码">

            </div>
            <div class="dian">
                <input type="button"value="注册">

            </div>
        </div>
    </div>
</body>
</html>
<script src="./04-ajax.js"></script>

<script>
//获取五个input输入框
var inputs = document.querySelectorAll('.bigbox .block input .dian input');
        //获取select标签
        // var select = document.querySelector('.bigbox ');

        //给button绑定点击事件
        inputs[2].onclick = function(){
            //对表单内容做校验( 为空校验, 格式校验 )
            if( inputs[0].value && inputs[1].value ){
                //if( /^1[3-9]\d{9}$/.test( inputs[0].value ) && /^\d{4}$/.test(inputs[1].value) ){
                if(/^\d{4}$/.test(inputs[1].value) ){
                    //通过校验, 发起登陆请求
                    ajax('get','https://yantianfeng.com/api/register',{ 
                        phone:inputs[0].value,
                        password: inputs[1].value,
                        // sex: select.value,
                        // age: inputs[2].value,
                        password: inputs[2].value
                    }, function(data){
                        console.log(data);
                    })
                }else{
                    alert('请输入正确的手机号/密码')
                }
            }else{
                alert('用户名/密码不能为空!')
            }
        }
</script>